<template>
	<view class="bank-card-management">
		<NavBar title="银行卡管理" :isBack="true"></NavBar>
		<view class="content">
			<view class="card-list">
				<view class="item" v-for="(item, index) in banklist" :key="index">
					<view class="header">
						<view class="card-img-bg">
							<image src="@/static/services/card-icon.png"></image>
						</view>
						<view class="card-info">
							<view class="card-name">{{ item.type }}</view>
							<view class="card-type">储蓄卡</view>
						</view>
					</view>
					<view class="footer">
						<view class="card-num">{{ item.card }}</view>
					</view>
				</view>
			</view>
			<view class="add-btn" @click="toAddBankCard">
				<image src="@/static/my/add.png"></image>
				添加银行卡
			</view>
		</view>

	</view>
</template>

<script setup>
import { bankData } from '@/api/services.js'
import { reactive, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const state = reactive({
	banklist: []
})
async function getBanklist () {
	const res = await bankData()
	state.banklist = res.data.data
	console.log(res, 'res');
}
function toAddBankCard () {
	uni.navigateTo({
		url: "/pages/services/addBankCard"
	})
}
onShow(() => {
	getBanklist()
})
const { banklist } = toRefs(state)
</script>

<style lang="scss" scoped>
page {
	background: #FFFFFF;
}

.bank-card-management {
	.content {
		position: relative;
		z-index: 1;
		padding: 43rpx 36rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0rpx 0rpx;

		.card-list {
			.item {
				width: 678rpx;
				height: 188rpx;
				background: linear-gradient(94deg, #4E89B7 0%, #33508D 100%);
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 24rpx 41rpx 24rpx 45rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;

				.header {
					display: flex;
					margin-bottom: 21rpx;

					.card-img-bg {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 79rpx;
						height: 79rpx;
						background: #FFFFFF;
						border-radius: 50%;
						margin-right: 21rpx;

						image {
							width: 54rpx;
							height: 57rpx;
						}
					}

					.card-info {
						color: #FFFFFF;

						.card-name {
							font-weight: bold;
							font-size: 26rpx;
							margin-bottom: 2rpx;
						}

						.card-type {
							font-weight: 500;
							font-size: 18rpx;
							color: #FFFFFF;
						}
					}
				}

				.footer {
					display: flex;
					justify-content: flex-end;

					.card-num {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.add-btn {
			margin: 0 auto;
			margin-top: 68rpx;
			width: 648rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			border-radius: 500rpx;
			border: 1rpx solid #58DBCF;
			font-weight: bold;
			font-size: 30rpx;
			color: #58DBCF;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
}
</style>